// src/components/sidebar.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Sidebar = () => {
    const navigate = useNavigate();

    const handleMenuItemClick = (path) => {
        navigate(path);
    };

    return (
        <aside className="w-75 bg-gray-800 text-white p-4 flex flex-col">
            <div className="text-xl font-bold mb-6">植物管理系统</div>
            <nav>
                {/* 1. 植物管理主菜单 */}
                <div className="my-5">
                    <h3
                        className="font-semibold cursor-pointer flex items-center justify-between"
                        onClick={() => handleMenuItemClick('/plantIndex')}
                    >
                        <div className='flex items-center'>
                            <i className="fas fa-leaf mr-2"></i> 植物管理
                        </div>
                    </h3>
                </div>

                {/* 2. 环境数据 */}
                <div className="my-5">
                    <h3
                        className="font-semibold cursor-pointer flex items-center justify-between"
                        onClick={() => handleMenuItemClick('/envData')}
                    >
                        <div className='flex items-center'>
                            <i className="fas fa-user-graduate mr-2"></i> 环境数据
                        </div>
                    </h3>
                </div>
                {/* 3. 认领中心 */}
                <div className="my-5">
                    <h3
                        className="font-semibold cursor-pointer flex items-center justify-between"
                        onClick={() => handleMenuItemClick('/claims')}
                    >
                        <div className='flex items-center'>
                            <i className="fas fa-user-graduate mr-2"></i> 认领中心
                        </div>
                    </h3>
                </div>
            </nav>
        </aside>
    );
};

export default Sidebar;